<template>
  <div id="home" style="position:relative;">
    <div id="container">
      <transition name="el-fade-in-linear">
        <div v-show="!showSingle" >
          <div class="charts-list" style="left: 0;">
            <div class="charts-item" style=" height: 60%;">
              <div class="charts-item-title">车库、车位状态</div>
              <div id="parkingNum" style="width: 100%;height: 100%">
              </div>
            </div>
            <div class="charts-item" style=" height: 30%;">
              <div class="charts-item-title">车库种类</div>
              <div id="parkingSort" style="width: 100%;height: 90%;">
              </div>
            </div>
          </div>
          <div class="charts-list" style="right:0;">
            <div class="charts-item" style=" height: 40px">
                    <input slot="reference" class="search-input" v-model="searchValue" placeholder="输入需要搜索的车库名称" @change="searchData">
            </div>
            <div class="charts-item" style="height: 800px">
                <div class="charts-item-title">热门车库</div>
                <ul class="hot-parking">
                    <li class="item" v-for="(item,index) in parkingList" :key="index" @click="getParking(item)">
                        <div class="item-num">{{index+1}}</div>
                        <span class="item-text">{{item.parkingName}}<img v-show="index<3" src="../assets/hot.png" style="width: 20px;height: 20px"/></span>
                        <span v-show="item.discount<10" class="zhe">{{item.discount}}折</span>
                    </li>
                </ul>
            </div>
          </div>
        </div>
      </transition>
      <transition name="el-fade-in-linear">
        <div v-show="showSingle">
          <div class="charts-list-detail" style="left: 0;top: 20px;justify-content:flex-start">
            <div class="charts-item" style="height: auto">
              <div style="width: 80%;display: flex;flex-direction: column;justify-items: center;align-items: center;margin-top: 10px;color: #538cff;font-size: 18px">
                  <div>
                      <h1 style="color: white;padding: 10px 0">{{parkingData.parkingName}}<span v-show="parkingData.discount<10" class="zhe">{{parkingData.discount}}折</span></h1>
                  </div>
                  <el-row :gutter="20">
                      <el-col :span="12">
                          <img v-if="parkingData.picIds" :src="domain+parkingData.picIds" style="height: 100px;width: 100%">
                      </el-col>
                      <el-col :span="12">
                          <el-row>
                              <el-col :span="12"> <span style="font-weight: 600;font-size: 18px;color: white">车库类型:</span></el-col>
                              <el-col :span="12">  {{parkingData.parkingSortCode | CodeFilter}}</el-col>
                          </el-row>
                          <el-row>
                              <el-col :span="12"> <span style="font-weight: 600;font-size: 18px;color: white">是否营业:</span></el-col>
                              <el-col :span="12"> {{parkingData.isBusiness | CodeFilter}}</el-col>
                          </el-row>
                          <el-row>
                              <el-col :span="12"> <span style="font-weight: 600;font-size: 18px;color: white">车库状态:</span></el-col>
                              <el-col :span="12">  {{parkingData.parkingStatusCode | CodeFilter}}</el-col>
                          </el-row>
                          <el-row>
                              <el-col :span="12"> <span style="font-weight: 600;font-size: 18px;color: white">车库电话:</span></el-col>
                              <el-col :span="12">  {{parkingData.parkingPhone}} </el-col>
                          </el-row>
                      </el-col>
                  </el-row>
                  <el-row style="width: 100%">
                      <el-col :span="6"> <span style="font-weight: 600;font-size: 18px;color: white">车库评分:</span></el-col>
                      <el-col :span="18">
                          <el-rate
                                  v-model="value"
                                  disabled
                                  show-score
                                  text-color="#ff9900"
                                  score-template="{value}">
                          </el-rate>
                      </el-col>
                  </el-row>
                  <el-row style="width: 100%">
                      <el-col :span="8"><span style="font-weight: 600;font-size: 18px;color: white">最大可停时间:</span></el-col>
                      <el-col :span="16">
                          <span>{{parkingData.maxTime}} 小时</span>
                      </el-col>
                  </el-row>
                  <el-row style="width: 100%">
                      <el-col :span="8"><span style="font-weight: 600;font-size: 18px;color: white">空闲车位:</span></el-col>
                      <el-col :span="16">
                          <span>{{parkingData.leftNum}}/{{parkingData.carPlaceNum}} 个</span>
                      </el-col>
                  </el-row>
                  <el-row style="width: 100%">
                      <el-col :span="6"><span style="font-weight: 600;font-size: 18px;color: white">车库描述:</span></el-col>
                      <el-col :span="18">
                          <span>{{parkingData.parkingDesc}}</span>
                      </el-col>
                  </el-row>
                  <el-row style="width: 100%;margin-bottom: 20px">
                      <el-col :span="6"><span style="font-weight: 600;font-size: 18px;color: white">所在位置:</span></el-col>
                      <el-col :span="18">
                          {{parkingData.location}}
                      </el-col>
                  </el-row>
              </div>
            </div>
          </div>
          <div class="charts-list" style="right:0;">
            <div class="charts-item">
                <div class="charts-item-title">最新订单</div>
                <div style="width: 100%;height: 80%;overflow: hidden">
                    <vue-seamless-scroll :data="scrollList" :class-option="classOption" class="seamless-warp">
                        <ul style="list-style: none">
                            <li style="height: 30px;line-height:30px;width: 100%;text-indent: 20px;overflow: hidden;color: aquamarine;white-space: nowrap;text-overflow: ellipsis;padding: 0" v-for="item in scrollList">{{item}}</li>
                        </ul>
                    </vue-seamless-scroll>
                </div>
            </div>
            <div class="charts-item" style="height: 350px;">
                <div class="charts-item-title">车位分布</div>
                <div id="sortBar" style="width: 300px;height: 300px"></div>
            </div>

          </div>
        </div>
      </transition>
    </div>

  </div>
</template>

<script>
  const AMap = window.AMap;
  import Filter from '../utils/filter.js'
  import Config from '../config'
  export default {
      data(){
          return{
              map:{},
              domain:Config.domain,
              markers:[],
              showSingle:false,
              parkingData:{},
              parkingSort:[],
              parkingList:[],
              sortData:[],
              searchValue:"",
              visible:false,
              animate:false,
              value:5,
              classOption:{
                  step: 0.2, // 数值越大速度滚动越快
                  limitMoveNum: 5, // 开始无缝滚动的数据量 this.dataList.length
                  hoverStop: true, // 是否开启鼠标悬停stop
                  direction: 1, // 0向下 1向上 2向左 3向右
                  openWatch: true, // 开启数据实时监控刷新dom
                  singleHeight: 30, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
                  singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
                  waitTime: 1000 // 单步运动停止的时间(默认值1000ms)
              },
              scrollList:[]
          }
      },
      methods:{
          mapLoad() {
             this.map = new AMap.Map("container", {
                  center: [112.931731, 27.846898],
                  zoom: 22,
                  pitch: 45,
                  viewMode: '3D',
                  resizeEnable: true,
                  mapStyle:"amap://styles/90c6612006f4cbe880dff9c892a7262a"
              });
          },
          showMarker(){
            let self = this;
            self.$http.get("/parking/getAllUsedParking").then(res=>{
                if (res.status===200){
                    let startIcon = new AMap.Icon({
                        // 图标尺寸
                        size: new AMap.Size(40, 40),
                        // 图标的取图地址
                        image: require('../assets/parking.png'),
                        // 图标所用图片大小
                        imageSize: new AMap.Size(40, 40),
                    });
                    self.parkingList = res.data;
                    self.parkingList.forEach(p=>{
                        let marker = new AMap.Marker({
                            position: new AMap.LngLat(p.longitude, p.latitude),
                            icon:startIcon
                        });
                        marker.setLabel({
                            offset: new AMap.Pixel(40, -10),  //设置文本标注偏移量
                            content: "<div>"+p.parkingName+"</div>", //设置文本标注内容
                            direction: 'right' //设置文本标注方位
                        });
                        marker.on("click",function () {
                           self.showSingle = !self.showSingle;
                            self.$http.get("/carPlace/getLeftNumByParkingId?parkingId="+p.id).then(res=>{
                                if (res.status===200){
                                    p.leftNum = res.data;
                                    self.parkingData = p;
                                }
                            });
                           self.getSingleParking(p.id);
                        });
                        self.map.add(marker);
                    });
                }
            });
          },
          getParkingNumChart(){
              let parkingNumChart =  echarts.init(document.getElementById("parkingNum"));
              let option;
              this.$http.get("/analyze/getParkingAnalyzeData").then(res=>{
                  if (res.status===200){
                      let parkingNum = res.data.parkingNum;
                      let bussinessCount = res.data.bussinessCount;
                      let carplace = res.data.carplace;
                      let leftNum = res.data.leftNum;
                      option = {
                          series: [
                              {
                                  name: ' 车库总数（个）',
                                  type: 'pie',
                                  radius: ['25%', '30%'],
                                  center: ['30%', '30%'],
                                  startAngle: 225,
                                  color: [new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                      offset: 0,
                                      color: '#00a2ff'
                                  }, {
                                      offset: 1,
                                      color: '#70ffac'
                                  }]), "transparent"],
                                  labelLine: {
                                      normal: {
                                          show: false
                                      }
                                  },
                                  label: {
                                      normal: {
                                          position: 'center'
                                      }
                                  },
                                  data: [{
                                      value: 75,
                                      name: '车库总数',
                                      label: {
                                          normal: {
                                              formatter: '车库总数',
                                              textStyle: {
                                                  color: '#fff',
                                                  fontSize: 15,
                                                fontWeight:600
                                              }
                                          }
                                      }
                                  }, {
                                      value: 25,
                                      name: '%',
                                      label: {
                                          normal: {
                                              formatter: '\n'+parkingNum,
                                              textStyle: {
                                                  color: 'red',
                                                  fontSize: 20,
                                                  fontWeight:600

                                              }
                                          }
                                      }
                                  },
                                      {
                                          value: 0,
                                          name: '%',
                                          label: {
                                              normal: {
                                                  formatter: '个',
                                                  textStyle: {
                                                    color: '#fff',
                                                    fontSize: 15,
                                                    fontWeight:600

                                                  }
                                              }
                                          }
                                      }]
                              },
                              {
                                  name: ' 在营车库',
                                  type: 'pie',
                                  radius: ['25%', '30%'],
                                  center: ['70%', '30%'],
                                  startAngle: 225,
                                  color: [new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                      offset: 0,
                                      color: '#00a2ff'
                                  }, {
                                      offset: 1,
                                      color: '#70ffac'
                                  }]), "transparent"],
                                  labelLine: {
                                      normal: {
                                          show: false
                                      }
                                  },
                                  label: {
                                      normal: {
                                          position: 'center'
                                      }
                                  },
                                  data: [{
                                      value: 75,
                                      name: '在营车库',
                                      label: {
                                          normal: {
                                              formatter: '在营车库',
                                              textStyle: {
                                                color: '#fff',
                                                fontSize: 15,
                                                fontWeight:600

                                              }
                                          }
                                      }
                                  }, {
                                      value: 25,
                                      name: '%',
                                      label: {
                                          normal: {
                                              formatter: '\n'+bussinessCount,
                                              textStyle: {
                                                  color: 'red',
                                                  fontSize: 20,
                                                fontWeight:600

                                              }
                                          }
                                      }
                                  },
                                      {
                                          value: 0,
                                          name: '%',
                                          label: {
                                              normal: {
                                                  formatter: '个',
                                                  textStyle: {
                                                    color: '#fff',
                                                    fontSize: 15,
                                                    fontWeight:600

                                                  }
                                              }
                                          }
                                      }]
                              },
                              {
                                  name: ' 车位总数',
                                  type: 'pie',
                                  radius: ['25%', '30%'],
                                  center: ['30%', '70%'],
                                  startAngle: 225,
                                  labelLine: {
                                      normal: {
                                          show: false
                                      }
                                  },
                                  label: {
                                      normal: {
                                          position: 'center'
                                      }
                                  },
                                  data: [{
                                      value: 75,
                                      "itemStyle": {
                                          "normal": {
                                              "color": new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                                  "offset": 0,
                                                  "color": '#f125ff'
                                              }, {
                                                  "offset": 1,
                                                  "color": '#2dcbff'
                                              }]),
                                          }
                                      },
                                      name: '车位总数',
                                      label: {
                                          normal: {
                                              formatter: '车位总数',
                                              textStyle: {
                                                color: '#fff',
                                                fontSize: 15,
                                                fontWeight:600

                                              }
                                          }
                                      }
                                  }, {
                                      value: 25,
                                      name: '%',
                                      label: {
                                          normal: {
                                              formatter: '\n'+carplace,
                                              textStyle: {
                                                  color: 'red',
                                                  fontSize: 20,
                                                fontWeight:600

                                              }
                                          }
                                      }
                                  },
                                      {
                                          value: 0,
                                          name: '%',
                                          label: {
                                              normal: {
                                                  formatter: '个',
                                                  textStyle: {
                                                    color: '#fff',
                                                    fontSize: 15,
                                                    fontWeight:600

                                                  }
                                              }
                                          }
                                      }]
                              },
                              {
                                  name: '空闲车位',
                                  type: 'pie',
                                  radius: ['25%', '30%'],
                                  center: ['70%', '70%'],
                                  startAngle: 225,
                                  labelLine: {
                                      normal: {
                                          show: false
                                      }
                                  },
                                  label: {
                                      normal: {
                                          position: 'center'
                                      }
                                  },
                                  data: [{
                                      value: 75,
                                      "itemStyle": {
                                          "normal": {
                                              "color": new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                                  "offset": 0,
                                                  "color": '#f125ff'
                                              }, {
                                                  "offset": 1,
                                                  "color": '#2dcbff'
                                              }]),
                                          }
                                      },
                                      name: '空闲车位',
                                      label: {
                                          normal: {
                                              formatter: '空闲车位',
                                              textStyle: {
                                                color: '#fff',
                                                fontSize: 15,
                                                fontWeight:600

                                              }
                                          }
                                      }
                                  }, {
                                      value: 25,
                                      name: '%',
                                      label: {
                                          normal: {
                                              formatter: '\n'+leftNum,
                                              textStyle: {
                                                  color: 'red',
                                                  fontSize: 20,
                                                fontWeight:600
                                              }
                                          }
                                      }
                                  },
                                      {
                                          value: 0,
                                          name: '%',
                                          label: {
                                              normal: {
                                                  formatter: '个',
                                                  textStyle: {
                                                    color: '#fff',
                                                    fontSize: 15,
                                                    fontWeight:600

                                                  }
                                              }
                                          }
                                      }]
                              },
                          ]
                      };
                      parkingNumChart.setOption(option);
                  }
              });
          },
          getParkingSortChart(){
              let self= this;
              let option;
              let parkingSortChart = echarts.init(document.getElementById("parkingSort"));
              self.$http.get("/analyze/getParkingSortAnalyzeData").then(res=>{
                  if (res.status===200){
                      let sortData = res.data.sortData;
                      let sortNum = res.data.sortNum;
                      option = {
                          color: ['#3398DB'],
                          tooltip : {
                              trigger: 'axis',
                              axisPointer : {            // 坐标轴指示器，坐标轴触发有效
                                  type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                              }
                          },
                        toolbox: {
                          show : true,
                          feature : {
                            mark : {show: true},
                            magicType : {show: true, type: ['line', 'bar']}
                          }
                        },
                          grid: {
                              left: '3%',
                              right: '4%',
                              bottom: '3%',
                              containLabel: true
                          },
                          xAxis : [
                              {
                                  type : 'category',
                                  data : sortData,
                                  axisTick: {
                                      alignWithLabel: true
                                  },
                                  axisLine:{
                                      lineStyle:{
                                          color:"#fff"
                                      }
                                  }
                              }
                          ],
                          yAxis : [
                              {
                                  type : 'value',
                                  show : false

                              }
                          ],
                          series : [
                              {
                                  name:'数量',
                                  type:'bar',
                                  barWidth: '50%',
                                  data:sortNum
                              }
                          ]
                      };
                      parkingSortChart.setOption(option);
                  }
              });
          },
          getSingleParking(data){
              let sortBar = echarts.init(document.getElementById("sortBar"));
              this.$http.get("/analyze/getCarPlaceAnalyzeData?parkingId="+data).then(res=>{
                  if (res.status===200){
                      let sortData = res.data.sortData;
                      let sortNum = res.data.sortNum;
                      let option = {
                          tooltip : {
                              trigger: 'item',
                              formatter: "{a} <br/>{b} : {c} ({d}%)"
                          },
                          legend: {
                              orient: 'horizontal',
                              left: 'left',
                              textStyle:{
                                  color:"#fff"
                              },
                              data: sortData
                          },
                          series : [
                              {
                                  name: '车位数量',
                                  type: 'pie',
                                  radius : '55%',
                                  center: ['50%', '60%'],
                                  data: sortNum,
                                  itemStyle: {
                                      emphasis: {
                                          shadowBlur: 10,
                                          shadowOffsetX: 0,
                                          shadowColor: 'rgba(0, 0, 0, 0.5)'
                                      }
                                  }
                              }
                          ]
                      };
                      sortBar.setOption(option);
                  }
              })
              this.getOrderList(data);

          },
          searchData(){
              if (this.searchValue==null ||this.searchValue === ""){
                  this.$message.warning("需要输入搜索的车库")
              }
              this.$http.get("/parking/selectByParkingName?name="+this.searchValue).then(res=>{
                  if (res.status===200){
                      if (res.data==null){
                          this.$message.warning("未找到改车库")
                      } else {
                          this.map.setCenter([res.data.longitude,res.data.latitude]);
                          this.visible = true;
                      }
                  }
              })
          },
          getParking(data){
              this.map.setCenter([data.longitude,data.latitude]);
          },
          getOrderList(data){
                this.$http.get("/parkingOrder/getSelfOrderList?parkingId="+data).then(res => {
                  if (res.status === 200){
                     let orderList = res.data;
                     if (orderList!=null){
                       this.scrollList = [];
                       orderList.forEach(o => {
                         console.log(o)
                         this.scrollList.push(o.createDatetime+"接收了一条新的预约订单")
                       })
                     }
                  }
                })
           }


      },
      created(){
      },
      mounted(){
          this.mapLoad();
          this.showMarker();
          this.getParkingNumChart();
          this.getParkingSortChart();
      },
      filters:{
          CodeFilter:function (data) {
              return Filter.CodeFilter(data)
          }
      }


  }
</script>

<style scoped lang="less">
  #home{
    width: 100%;
    height: calc(~'100vh - 88px');
  }
  .zhe{
      color: #f5f7fa;
      float: right;
      margin-left: 3px;
      display: inline-block;
      background-color: #ee0808;
      padding: 2px;
      font-size: 15px;
      border-radius: 7px;
      width: 30px;
      text-align: center;
      letter-spacing: 2px;
      font-weight: bold;
  }
  #container{
    width: 100%;
    height: 100%;
    .charts-list{
      position: absolute;
      width: 20%;
      height: 100%;
      z-index: 999;
      display: flex;
      align-items: center;
      flex-direction: column;
      justify-content: space-around;
      .charts-item{
        width: 90%;
        height: 24%;
        background: rgba(0, 0, 0, 0.48);
        display: flex;
        flex-direction: column;
        align-items: center;
        border-radius: 10px;
        .charts-item-title{
          text-align: center;
          color: white;
          height: 40px;
          line-height: 40px;
          font-size: 20px;
          font-weight: 600;
          width: 80%;;
        }

      }
    }
    .charts-list-detail{
      position: absolute;
      width: 30%;
      height: 100%;
      z-index: 999;
      display: flex;
      align-items: center;
      flex-direction: column;
      justify-content: space-around;
      .charts-item{
        width: 90%;
        height: 24%;
        background: rgba(0, 0, 0, 0.48);
        display: flex;
        flex-direction: column;
        align-items: center;
        border-radius: 10px;
        .charts-item-title{
          text-align: center;
          letter-spacing: 5px;
          color: white;
          font-size: 20px;
          height: 30px;
          line-height: 30px;
          border-bottom: 1px solid white;
          width: 80%;;
        }

      }
    }
    .search-input{
        width: 100%;
        height: 40px;
        background: transparent;
        border: none;
        color: white;
        line-height: 48px;
        text-indent: 15px;
        outline: none;
    }
    .hot-parking{
        width: 100%;
        list-style: none;
        overflow-y: auto;
        color: #ffe23e;
        .anim {
            transition: all 0.5s;
        }
        li:nth-child(n+4){
            color: white;
        }
        .item{
            height: 30px;
            display: flex;
            flex-direction: row;
            vertical-align: center;
            align-items: center;
            margin-top: 5px;
            cursor: pointer;
            &:hover{
                background-color: hsla(208, 33%, 62%, 0.7);
            }
            .item-num{
                height: 100%;
                width: 25px;
                text-align: center;
                line-height: 35px;
                font-size: 18px;
                font-weight: 600;
                margin-left: 5px;
            }
            .item-text{
                text-indent: 10px;
                font-size: 16px;
                letter-spacing: 1px;
                font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
            }
        }

    }
  }
</style>
